<template>
    <div id="app">
        <input type="text" v-model='user'>
        <input type="text" v-model='pass'>
        <button @click="login">登录</button>
        
        
        
        <el-button
            @click="addBlog"
        >
            新增
        </el-button>
        <Dialog ref='dialog' @update="pageChange(pageIndex)"/>
        <el-table
            :data="
                tableData
            "
            style="width: 100%"
			v-loading="bool"
        >
            <el-table-column label="id" prop="id"> </el-table-column>
            <el-table-column label="title" prop="title"> </el-table-column>
            <el-table-column label="content" prop="content"> </el-table-column>
            <el-table-column label="author" prop="author"> </el-table-column>
            <el-table-column label="time">
				<template slot-scope="scope">
                    {{scope.row.create_time | timeToDate}}
                </template>
			</el-table-column>
            <el-table-column align="right">
                <template slot="header" slot-scope="scope">
                    <el-input
                        v-model="keyword"
                        size="mini"
                        placeholder="输入关键字搜索"
                    />
                </template>
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        @click="handleEdit(scope.row)"
                        >Edit</el-button
                    >
                    <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.row.id)"
                        >Delete</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
		<el-pagination
			layout="prev, pager, next"
			:total="total"
			:page-size="pageSize"
			:current-page='pageIndex'
			@current-change="pageChange"
			>
		</el-pagination>
    </div>
</template>

<script>
import Dialog from './components/dialog.vue'
export default {
    components: {
        Dialog,
    },
	filters: {
		timeToDate(val) {
			return new Date(val).toLocaleString();
		}
	},
    created() {
        this.pageChange()
    },
    data() {
        return {
			bool:false,
            tableData:[],
            keyword: '',
			pageIndex:1,
			pageSize:5,
			total: 0,
			timer: null,
			ind:0,
            user: '',
            pass:''
        }
    },
	watch: {
		keyword() {
			clearTimeout(this.timer)
			this.timer = setTimeout(() => {
				this.ind+=1
				this.pageChange(1,this.ind)
			}, 800);
		}
	},
    methods: {
        login() {
            this.$api.login({
                username: this.user,
                password: this.pass,
            }).then(res=>{
                if(res.code===1){
                    // 登陆成功
                    window.localStorage.setItem('token',res.data.token)
                }
            })
        },
        addBlog() {
            this.$refs.dialog.dialogFormVisible = true;
            this.$refs.dialog.form = {
                title:"",
                content:"",
                author:"",
            }
        },
        handleEdit(row) {
            this.$refs.dialog.dialogFormVisible = true;
            this.$refs.dialog.form = JSON.parse(JSON.stringify(row));
        },
        handleDelete(id) {
            this.$api.delList(id).then(res=>{
				if(res.code ===1) {
					this.pageChange() //刷新列表
					this.$message({type:"success", message:"删除成功"}) // 弹出轻提示
				}
			})
        },
		pageChange(e = 1, ind=this.ind){
			this.pageIndex= e;
			this.bool=true;
			this.$api
				.getList({
					pageIndex: this.pageIndex,
					pageSize: this.pageSize,
					keyword: this.keyword
				})
				.then((res) => {
					if(this.ind !== ind) return;
					if(res.code===1){
						this.tableData = res.data.data
						this.total = res.data.total
					}
					this.bool=false
				})
		}
    },
}
</script>

<style>
</style>